<template>
  <div class="login">
      <my-head title="登录" :go="false" :ri="null"></my-head>
      <div class="content">
        <table>
          <tr>
            <td>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-msnui-tel"></use>
              </svg>
              <input type="text" placeholder="手机号码" v-model="tel">
            </td>
          </tr>
          <tr>
            <td>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-mima"></use>
              </svg>
              <input type="text" placeholder="登录密码" v-model="pwd">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yanjing-bi"></use>
              </svg>
            </td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td>
              <button @click="login">登录</button>
            </td>
          </tr>
          <tr>
            <td>
              <b @click="goregister">注册</b>
              <span></span>
              <b>忘记密码</b>
            </td>
          </tr>
        </table>
      </div>
  </div>
</template>

<script>
import Head from "@/components/Head"
export default {
  data(){
    return {
      // 手机号和密码
      tel:null,
      pwd:null,

      userlist:[]
    }
  },
  components:{
    myHead:Head
  },
  created(){
    this.getuser()
  },
  methods:{
    // 去注册页面
    goregister(){
      this.$router.push({path:"/register"})
    },
    // 登录
    login(){
      
      for(var i = 0;i<this.userlist.length;i++){
        // 手机号判断
        if(this.tel == this.userlist[i].tel){
          // 密码判断
          if(this.pwd == this.userlist[i].pwd){
            // 设置sessionStorage
            sessionStorage.setItem("id",this.userlist[i].id)
            // 跳转页面
            this.$router.push({path:'/my'})
          }else{
            console.log("输入的密码有误")
          }
        }else{
          console.log("输入的手机号有误")
        }
      }
    },
    // 请求数据
    getuser(){
      this.$http.get("../../../../static/json/user.json").then((res)=>{
        
        this.userlist = res.data.user
      })
    }
  }
}
</script>

<style scoped lang="less">
  .login{
    flex: 1;
    display: flex;
    flex-direction: column;
    .content{
      flex: 1;
      padding: 0.2rem 0.36rem;
      table{
        width: 100%;
        tr{
          td{
            display: flex;
            flex-direction: row;
            margin-bottom: 0.075rem;
            .icon{
              width: 0.17rem;
              height: 0.17rem;
              font-size: 0.17rem;
              margin: 0.195rem 0.13rem;
            }
            span{
              flex: 1;
            }
            input,button{
              border: 0;
              outline: none;
              flex: 1;
              font-size: 0.17rem;
              padding: 0.16rem 0;
            }
            button{
              color: #fff;
              background: #ff8b38;
            }
            b{
              color: #ff8b38;
            }
          }
        }
        tr:nth-child(1) td,tr:nth-child(2) td{
          border-bottom: 0.02rem #ececec solid;
        }
      }
    }
  }
</style>
